<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Spider AI</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <div id="app">
        <!-- 导航栏 -->
        <nav class="fixed top-0 left-0 right-0 bg-gray-800 shadow-lg z-50">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="h-8 w-8">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-full h-full">
                                    <!-- 外圈蜘蛛网效果 -->
                                    <circle cx="50" cy="50" r="45" fill="none" stroke="#4F46E5" stroke-width="2" />
                                    <circle cx="50" cy="50" r="35" fill="none" stroke="#4F46E5" stroke-width="1.5" opacity="0.7" />
                                    <circle cx="50" cy="50" r="25" fill="none" stroke="#4F46E5" stroke-width="1" opacity="0.5" />
                                    
                                    <!-- 放射状线条 -->
                                    <line x1="50" y1="5" x2="50" y2="20" stroke="#4F46E5" stroke-width="1.5" />
                                    <line x1="95" y1="50" x2="80" y2="50" stroke="#4F46E5" stroke-width="1.5" />
                                    <line x1="50" y1="95" x2="50" y2="80" stroke="#4F46E5" stroke-width="1.5" />
                                    <line x1="5" y1="50" x2="20" y2="50" stroke="#4F46E5" stroke-width="1.5" />
                                    
                                    <!-- E字母 -->
                                    <path d="M40 35 L60 35 M40 35 L40 65 M40 50 L55 50 M40 65 L60 65" 
                                          stroke="#4F46E5" 
                                          stroke-width="4" 
                                          stroke-linecap="round"
                                          fill="none" />
                                    
                                    <!-- 小蜘蛛图案 -->
                                    <circle cx="65" cy="40" r="3" fill="#4F46E5" />
                                    <line x1="65" y1="37" x2="65" y2="33" stroke="#4F46E5" stroke-width="1" />
                                    <line x1="62" y1="40" x2="58" y2="40" stroke="#4F46E5" stroke-width="1" />
                                    <line x1="68" y1="40" x2="72" y2="40" stroke="#4F46E5" stroke-width="1" />
                                </svg>
                            </div>
                        </div>
                        <div class="hidden md:block">
                            <div class="ml-10 flex items-baseline space-x-4">
                                <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">首页</a>
                                <a href="#architecture" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">系统架构</a>
                                <a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">核心功能</a>
                                <a href="#technology" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">技术特点</a>
                                <a href="#subscription" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">套餐订阅</a>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="ml-4 flex items-center md:ml-6">
                            <a href="pages/login.html" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
                                登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- Hero部分 -->
        <div class="bg-gray-800 py-16 mt-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center">
                    <h1 class="text-4xl font-bold text-white mb-4">欢迎使用 E-Spider AI</h1>
                    <p class="text-xl text-gray-400 mb-8">创建、管理和部署您的AI机器人</p>
                    <div class="flex justify-center space-x-4">
                        <a href="pages/login.html" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
                            创建新机器人
                        </a>
                        <a href="pages/login.html" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
                            管理知识库
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统架构图 -->
        <div id="architecture" class="py-16 bg-gray-900">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-white">系统架构</h2>
                    <p class="mt-4 text-gray-400">强大而灵活的AI Bot平台架构设计</p>
                </div>
                <div class="bg-gray-800 rounded-lg p-8 shadow-xl overflow-hidden">
                    <!-- 架构图 -->
                    <div class="grid grid-cols-4 gap-8 min-h-[400px]">
                        <!-- 第一列：功能模块 -->
                        <div class="bg-gray-700 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-white mb-4">功能模块</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-blue-900 p-4 rounded-lg text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-robot text-blue-400 text-xl mb-2"></i>
                                        <span class="text-xs">AI Bot应用</span>
                                    </div>
                                </div>
                                <div class="bg-green-900 p-4 rounded-lg text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-book text-green-400 text-xl mb-2"></i>
                                        <span class="text-xs">知识库</span>
                                    </div>
                                </div>
                                <div class="bg-purple-900 p-4 rounded-lg text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-comments text-purple-400 text-xl mb-2"></i>
                                        <span class="text-xs">对话管理</span>
                                    </div>
                                </div>
                                <div class="bg-red-900 p-4 rounded-lg text-center">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-chart-bar text-red-400 text-xl mb-2"></i>
                                        <span class="text-xs">数据看板</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第二列：安全合规 -->
                        <div class="bg-gray-700 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-white mb-4">安全合规</h3>
                            <div class="space-y-3">
                                <div class="bg-yellow-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-yellow-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-filter text-yellow-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">内容过滤</div>
                                            <div class="text-xs text-yellow-400">拦截违规信息</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-yellow-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-yellow-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-lock text-yellow-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">数据加密</div>
                                            <div class="text-xs text-yellow-400">对话数据安全</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-yellow-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-yellow-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-shield-alt text-yellow-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">隐私保护</div>
                                            <div class="text-xs text-yellow-400">GDPR合规</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-yellow-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-yellow-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-user-shield text-yellow-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">风险防控</div>
                                            <div class="text-xs text-yellow-400">运营安全</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第三列：辅助功能 -->
                        <div class="bg-gray-700 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-white mb-4">辅助功能</h3>
                            <div class="space-y-3">
                                <div class="bg-purple-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-purple-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-user-friends text-purple-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">智能转人工</div>
                                            <div class="text-xs text-purple-400">无缝切换服务</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-purple-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-purple-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-memory text-purple-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">持久记忆</div>
                                            <div class="text-xs text-purple-400">上下文保持</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-purple-900 p-3 rounded-lg">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-purple-800 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-history text-purple-400"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm text-white">对话历史</div>
                                            <div class="text-xs text-purple-400">全程追溯</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第四列：渠道接入 -->
                        <div class="bg-gray-700 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-white mb-4">渠道接入</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="bg-green-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fab fa-weixin text-green-400 text-xl mb-1"></i>
                                        <span class="text-xs">WeChat</span>
                                    </div>
                                </div>
                                <div class="bg-blue-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-globe text-blue-400 text-xl mb-1"></i>
                                        <span class="text-xs">Web</span>
                                    </div>
                                </div>
                                <div class="bg-purple-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-code text-purple-400 text-xl mb-1"></i>
                                        <span class="text-xs">API</span>
                                    </div>
                                </div>
                                <div class="bg-red-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fab fa-telegram text-red-400 text-xl mb-1"></i>
                                        <span class="text-xs">Telegram</span>
                                    </div>
                                </div>
                                <div class="bg-green-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fab fa-line text-green-400 text-xl mb-1"></i>
                                        <span class="text-xs">Line</span>
                                    </div>
                                </div>
                                <div class="bg-pink-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fab fa-instagram text-pink-400 text-xl mb-1"></i>
                                        <span class="text-xs">Instagram</span>
                                    </div>
                                </div>
                                <div class="bg-gray-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fab fa-x-twitter text-white text-xl mb-1"></i>
                                        <span class="text-xs">X.com</span>
                                    </div>
                                </div>
                                <div class="bg-purple-900 p-3 rounded-lg">
                                    <div class="flex flex-col items-center">
                                        <i class="fab fa-slack text-purple-400 text-xl mb-1"></i>
                                        <span class="text-xs">Slack</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 核心功能介绍 -->
        <div id="features" class="py-16 bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-white">核心功能</h2>
                    <p class="mt-4 text-gray-400">全方位的AI机器人解决方案</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- AI Bot管理 -->
                    <div class="bg-gray-900 rounded-lg p-6 shadow-lg border border-gray-700">
                        <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-robot text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-4">AI Bot管理</h3>
                        <p class="text-gray-400 mb-4">基于各类业务场景，组合大模型、知识库、插件等原子能力，并进行个性化配置的"数字员工"。</p>
                        <ul class="text-gray-400 space-y-2">
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>支持多种大语言模型</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>自定义对话流程</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>实时监控和分析</span>
                            </li>
                        </ul>
                    </div>

                    <!-- 知识库 -->
                    <div class="bg-gray-900 rounded-lg p-6 shadow-lg border border-gray-700">
                        <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-book text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-4">知识库管理</h3>
                        <p class="text-gray-400 mb-4">智能的知识管理系统，支持多种格式文档的上传、处理和语义检索。</p>
                        <ul class="text-gray-400 space-y-2">
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>多格式文档支持</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>智能文档解析</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>语义化检索</span>
                            </li>
                        </ul>
                    </div>

                    <!-- 渠道管理 -->
                    <div class="bg-gray-900 rounded-lg p-6 shadow-lg border border-gray-700">
                        <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-network-wired text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-4">渠道管理</h3>
                        <p class="text-gray-400 mb-4">支持多渠道接入，一键部署到各种通讯平台。</p>
                        <ul class="text-gray-400 space-y-2">
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>网页即时通讯</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>第三方平台集成</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>API接口调用</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 技术特点 -->
        <div id="technology" class="py-16 bg-gray-900">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-white">技术特点</h2>
                    <p class="mt-4 text-gray-400">领先的技术架构，保障系统稳定性和可扩展性</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-gray-800 p-6 rounded-lg text-center">
                        <div class="w-12 h-12 bg-blue-500 rounded-full mx-auto flex items-center justify-center mb-4">
                            <i class="fas fa-bolt text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">高性能</h3>
                        <p class="text-gray-400">分布式架构设计，确保系统高效运行</p>
                    </div>
                    <div class="bg-gray-800 p-6 rounded-lg text-center">
                        <div class="w-12 h-12 bg-green-500 rounded-full mx-auto flex items-center justify-center mb-4">
                            <i class="fas fa-shield-alt text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">安全可靠</h3>
                        <p class="text-gray-400">多重安全防护，数据加密存储</p>
                    </div>
                    <div class="bg-gray-800 p-6 rounded-lg text-center">
                        <div class="w-12 h-12 bg-purple-500 rounded-full mx-auto flex items-center justify-center mb-4">
                            <i class="fas fa-expand-arrows-alt text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">可扩展</h3>
                        <p class="text-gray-400">模块化设计，支持灵活扩展</p>
                    </div>
                    <div class="bg-gray-800 p-6 rounded-lg text-center">
                        <div class="w-12 h-12 bg-red-500 rounded-full mx-auto flex items-center justify-center mb-4">
                            <i class="fas fa-chart-line text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-white mb-2">可监控</h3>
                        <p class="text-gray-400">全方位监控，实时性能分析</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 套餐订阅 -->
        <div id="subscription" class="py-16 bg-gray-800">
            <!-- 页面标题 -->
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-white">选择您的套餐</h2>
                    <p class="mt-4 text-gray-400">根据您的需求选择合适的套餐计划</p>
                </div>

                <!-- 套餐卡片列表 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 px-4">
                    <!-- 基础版套餐 -->
                    <div class="card p-6 bg-gray-900 rounded-lg shadow-lg border border-gray-700">
                        <div class="text-center mb-6">
                            <h3 class="text-xl font-bold mb-2">基础版</h3>
                            <div class="text-4xl font-bold mb-2">
                                ¥299<span class="text-gray-400 text-base font-normal">/月</span>
                            </div>
                            <p class="text-gray-400">适合个人开发者使用</p>
                        </div>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>1个AI机器人</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>10,000次对话/月</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>基础知识库管理</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>1个渠道接入</span>
                            </li>
                            <li class="flex items-center text-gray-500">
                                <i class="fas fa-times mr-2"></i>
                                <span>高级API接口</span>
                            </li>
                        </ul>
                        <a href="pages/login.html" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 text-center">
                            选择套餐
                        </a>
                    </div>

                    <!-- 专业版套餐 -->
                    <div class="card p-6 bg-gray-900 rounded-lg shadow-lg border-2 border-blue-500 transform scale-105 relative">
                        <div class="absolute -top-3 right-4">
                            <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">推荐</span>
                        </div>
                        <div class="text-center mb-6">
                            <h3 class="text-xl font-bold mb-2">专业版</h3>
                            <div class="text-4xl font-bold mb-2">
                                ¥899<span class="text-gray-400 text-base font-normal">/月</span>
                            </div>
                            <p class="text-gray-400">适合中小型企业使用</p>
                        </div>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>5个AI机器人</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>50,000次对话/月</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>高级知识库管理</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>3个渠道接入</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>高级API接口</span>
                            </li>
                        </ul>
                        <a href="pages/login.html" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 text-center">
                            选择套餐
                        </a>
                    </div>

                    <!-- 企业版套餐 -->
                    <div class="card p-6 bg-gray-900 rounded-lg shadow-lg border border-gray-700">
                        <div class="text-center mb-6">
                            <h3 class="text-xl font-bold mb-2">企业版</h3>
                            <div class="text-4xl font-bold mb-2">
                                ¥2999<span class="text-gray-400 text-base font-normal">/月</span>
                            </div>
                            <p class="text-gray-400">适合大型企业使用</p>
                        </div>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>无限AI机器人</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>200,000次对话/月</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>企业级知识库</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>无限渠道接入</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-check text-green-400 mr-2"></i>
                                <span>专属技术支持</span>
                            </li>
                        </ul>
                        <a href="pages/login.html" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 text-center">
                            联系销售
                        </a>
                    </div>
                </div>

                <!-- 常见问题 -->
                <div class="mt-16">
                    <h3 class="text-xl font-bold mb-6 text-center">常见问题</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 px-4">
                        <div class="bg-gray-900 rounded-lg p-6">
                            <h4 class="font-semibold mb-2">如何选择合适的套餐？</h4>
                            <p class="text-gray-400">根据您的使用需求、对话量和功能需求来选择。如果不确定，可以从基础版开始尝试。</p>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-6">
                            <h4 class="font-semibold mb-2">是否支持套餐升级？</h4>
                            <p class="text-gray-400">支持随时升级套餐，升级后立即生效，费用按剩余时间折算。</p>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-6">
                            <h4 class="font-semibold mb-2">超出套餐限额怎么办？</h4>
                            <p class="text-gray-400">超出限额后可以选择升级套餐或者按量付费继续使用。</p>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-6">
                            <h4 class="font-semibold mb-2">是否提供发票？</h4>
                            <p class="text-gray-400">所有套餐都支持开具增值税专用发票或普通发票。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 